<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>后台界面</title>
		<link href="<%=request.getContextPath()%>/easyui/jquery-easyui-1.5/themes/bootstrap/easyui.css" rel="stylesheet"/>
		<link href="<%=request.getContextPath()%>/easyui/jquery-easyui-1.5/themes/icon.css" rel="stylesheet"/>
		<script src="<%=request.getContextPath()%>/easyui/jquery-easyui-1.5/jquery.min.js"></script>
		<script src="<%=request.getContextPath()%>/easyui/jquery-easyui-1.5/jquery.easyui.min.js"></script>
		<script src="<%=request.getContextPath()%>/easyui/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
		<style>
			body {
				font-family: '微软雅黑';
				font-size: 16px;
			}
			.logo {
				width:100px;
				height:90px;
				line-height: 90px;
				font-size: 24px;
				margin-left: 20px;
				float: left;
			}
			.logout {
				float:right;
				line-height: 90px;
				margin-right: 20px;
			}
			.talent-add {
				padding:10px 20px; 
				text-align:center;
			}
			.talent-add input, .talent-add select {
				width: 200px;
			}
			#talentAddButtons {
				text-align: center;
			}
		</style>
	</head>
	<body class="easyui-layout">
	    <div style="height:100px;" data-options="
	    region:'north',
	    collapsible: false,
	    noheader: true">
	    	<div class="logo">后台管理</div>
	    	<div class="logout">你好，xxx | <a href="#">注销</a></div>
	    </div>
	    <div style="width:200px;" data-options="
	    region:'west',
	    title:'菜单',
	    iconCls:'icon-more'">
	    	<ul id="nav"></ul>
	    </div>
	    <div data-options="
	    region:'center',
	    noheader: true">
			<div id="tabs">
			   <div title="欢迎页" style="padding:10px;" data-options="
			   iconCls:'icon-tip'">
				  Hello World...
			   </div>
			</div>
	    </div>
	    
		<div id="tabMenu" class="easyui-menu">
		    <div data-options="
		    name:'refresh'">
		    	刷新
		    </div>
		    <div data-options="
		    name:'closeCurrent'">
		    	关闭当前
		    </div>
		    <div data-options="
		    	name:'closeOther'">
		    	关闭其它
		    </div>
		    <div data-options="
		    name:'closeAll'">
		    	关闭全部
		    </div>
		</div>
		<script>	
			var main = {
				init: function() {
					main.nav = $('#nav');
					main.tabs = $('#tabs');
					main.tabMenu = $('#tabMenu');
					
					// 请求tree数据
					main.nav.tree({
						url: '<%=request.getContextPath()%>/TestServlet?command=listMenu',
						lines: true,
						onLoadSuccess: function(node, data) {
							main.nav.tree('expandAll')
						},
						onClick: function(node) {
							if (node.url) {
 								if (main.tabs.tabs('exists', node.text)) {
									main.tabs.tabs('select', node.text)
								} else { 
									main.tabs.tabs('add', {
										title: node.text,
										iconCls: node.iconCls,
										closable: true,
										href: node.url
									});
						 		} 
							}
						}
					});
					
			        // 初始化tab，并创建右键菜单
					main.tabs.tabs({
						border: false,
						fit: true,
			            onContextMenu: function (e, title, index) {
			                e.preventDefault();
			                if (index > 0) {
			                	main.tabMenu.menu('show', {
			                        left: e.pageX,
			                        top: e.pageY
			                    }).data("tabTitle", title);
			                }
			            }
			        });
			        
			        // 右键菜单click
			        main.tabMenu.menu({
			            onClick: function (item) {
				            var allTabs = main.tabs.tabs('tabs');
				            var allTabtitle = [];
				            $.each(allTabs, function (i, v) {
				                var opt = $(v).panel('options');
				                if (opt.closable) {
				                    allTabtitle.push(opt.title);
				                }
				            });
				            var curTabTitle = $(this).data("tabTitle");
				            var curTabIndex = main.tabs.tabs("getTabIndex", main.tabs.tabs("getTab", curTabTitle));
				            switch (item.name) {
			                	case 'refresh':
			                    	var panel = main.tabs.tabs("getTab", curTabTitle).panel("refresh");
			                    	break;
				                case 'closeCurrent':
				                    main.tabs.tabs("close", curTabIndex);
				                    break;
				                case 'closeOther':
				                    $.each(allTabtitle, function(i, v) {
				                        if (curTabTitle != allTabtitle[i]) {
				                            main.tabs.tabs('close', allTabtitle[i]);
				                        }
				                    });
				                    main.tabs.tabs('select', curTabTitle);
				                    break; 
				                case 'closeAll':
				                    $.each(allTabtitle, function(i, v) {
				                        main.tabs.tabs('close', allTabtitle[i]);
				                    });
				                    break;
				            }
			            }
			        });
				}
			};
			
			$(function(){
				main.init();
			});
		</script>
	</body>
</html>